<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../static/css/style.css" />
<script type="text/javascript" src="../../static/js/jquery-1.8.3.min.js"></script>
	<style>
		td:nth-child(6) div {
			padding-left: 5px;
			width: 495px;
			white-space: nowrap; /* 强制不换行 */
			overflow: hidden; /* 超出的内容隐藏 */
			text-overflow: ellipsis; /* 溢出的文本显示... */
		}
		td:nth-child(3) {
			padding-left: 5px;
		}
	</style>
<script type="text/javascript">
	jQuery(function($) {
		function loadProduct(){
			var html ="";
			$.ajax({
					url:"listProduct.do",
					dataType:"json",
					success:function (resp) {
					$.each(resp,function (i, product) {
						html +='<tr><td align="center"><input type="checkbox" name="chk" value="'+product.id+'" /></td>'+
								'<td style="height: 22px" align="center">'+(i+1)+'</td>'+
								'<td style="height: 22px" align="left">'+product.name+'</td>'+
								'<td style="height: 22px" align="center">'+product.price+'</td>'+
								'<td style="height: 22px" align="center">'+product.num+'</td>'+
								'<td style="height: 22px" align="left"><div>'+product.description+'</div></td>'+
								'<td style="height: 22px" align="center"><img style="top: 10px" src="showImg.do?url='+product.imgurl+'"></td>'+
								'<td align="center">'+
								'<img edit='+product.id+' src="../../static/images/i_edit.gif" border="0" style="cursor: hand">'+
								'<img del='+product.id+' src="../../static/images/i_del.gif" border="0" style="cursor: hand">'+
								'</td> </tr>'

						$("#tbody").html(html);
					})
				}
			})
		}
		loadProduct();
		$("#add").click(function () {
			$("#updateDialog").show();
			$.ajax({
				url:"selectType.do",
				dataType:"json",
				success:function (data) {
					$.each(data,function (i, type) {
							$("#tid").append("<option value='"+type.id+"'>"+type.name+"</option>")

					})
				}
			});
			$("#closeDialog").click(function () {
				$("#updateDialog").hide();
			})
		})
		$("#addBtn").click(function () {
			//必须要借助该对象实现ajax的文件上传
			var formDate = new	FormData();
			/*将字段名和值进行追加*/
			formDate.append("name",$(":input[name=name]").val());
			formDate.append("tid",$(":input[name=tid]").val());
			formDate.append("price",$(":input[name=price]").val());
			formDate.append("num",$(":input[name=num]").val());
			formDate.append("description",$(":input[name=description]").val());
					/*文件选择框 获取的被选中的所有文件，是一个数组*/
				/*上传一个文件时，我们通过获取文件数组的下标为0的元素即可*/
				var files =$(":input[name=upFile]").prop("files");
				formDate.append("upFile",files[0]);
			console.log($(":input[name=name]").val());
			console.log($(":input[name=tid]").val());
			console.log($(":input[name=price]").val());
			console.log($(":input[name=num]").val());
			console.log($(":input[name=description]").val());
			console.log($(":input[name=upFile]").val());
			console.log(formDate);
			$.ajax({
				url:"addProduct.do",
				type:"post",
				data: formDate,
				contentType:false,/*//禁止jquery对数据进行任何修改*/
				processData:false,/*//禁止jquery对数据进行任何修改*/
				success:function (data) {
					if(data>0){
						alert("添加成功");
						$("#updateDialog").hide();
						loadProduct();

					}else {
						alert("添加失败");
						$("#updateDialog").show();
					}
				}
			})
		})

	//通过父类标签委派事件：
		$("#tbody").on("click","img[del]",function () {
			alert($(this).attr("del"))
			$.ajax({
				url:"deleteProduct.do?id="+$(this).attr("del"),
				success:function (data) {
					if(data>0){
						alert("删除成功")
						loadProduct();
					}else{
						alert("删除失败")
						loadProduct();
					}
				}
			})
		})


		//实现多项删除：
		$("#del").click(function () {
			//获取多选框中，被选中的id值：因为多项删除也是通过id来删除,
			// 因为多选框被选中的值为一个数组，
			//所以需要接收这个数组
			var ids ="";
			//根据名称获取所有复选框，并遍历所有复选框
			$(":input[name=chk]").each(function () {
				if(this.checked){//选中被选中的复选框
					ids +=","+this.value;//获取被选中的value值，也就是id值,将其拼接为字符串
				}
			});
			ids =ids.substring(1);//将获取的字符串的第一个逗号去掉

			$.ajax({
				url:"deleteMoreProducts?ids="+ids,
				success:function (data) {
					if(data>0){
						alert("删除成功！");
						loadProduct();
					}else{
						alert("删除失败！");
						loadProduct();
					}
				}
			})
		})


		//实现全选按钮
		$("#selectAll").click(function () {
			$(":checkbox[name=chk]").prop("checked",this.checked);
		})
		//实现子复选框影响全选按钮的状态:因为是通过ajax请求的页面，是动态页面，所以只能委托父类完成事件：
		$("#tbody").on("click","input[name=chk]",function () {//通过父类标签完成子复选框选中事件
			//如果所有子复选框的数量和所有子复选框被选中的数量相等，则把复选框的状态绑定给全选按钮
			$("#selectAll").prop("checked",$(":checkbox[name=chk]").size()==$(":checkbox[name=chk]:checked").size())
		})
		//通过父类标签委托事件完成编辑功能：
		$("#tbody").on("click","img[edit]",function () {

				location ="/editSelectProduct.do?id="+$(this).attr("edit");
		})
	});
</script>
</head>
<body>
<div id="updateDialog" style="">
	<form id="dataForm" method="post" enctype="multipart/form-data" >
		<table cellSpacing="30" cellPadding="5" width="100%" align="center" bgColor="#eeeeee" style="border: 1px solid #8ba7e3" border="0">
			<tr>
				<td class="ta_01" bgColor="#afd1f3" colSpan="4" height="26">
					<strong>添加商品</strong>
				</td>
			</tr>
			<tr>
				<td width="20%" align="center" bgColor="#f5fafe" class="ta_01">
					商品名称：
				</td>
				<td width="30%" class="ta_01" bgColor="#ffffff">
					<input type="text" name="name" value="" id="userAction_save_do_logonName" class="bg"/>
				</td>
				<td width="20%" align="center" bgColor="#f5fafe" class="ta_01">
					所属分类：
				</td>
				<td class="ta_01" bgColor="#ffffff">
					<select name="tid" class="bg" id="tid">

					</select>
				</td>
			</tr>
			<tr>
				<td align="center" bgColor="#f5fafe" class="ta_01">
					商品价格：
				</td>
				<td class="ta_01" bgColor="#ffffff">
					<input type="text" name="price" id="price"  class="bg"/>
				</td>
				<td align="center" bgColor="#f5fafe" class="ta_01">
					库存数量：
				</td>
				<td class="ta_01" bgColor="#ffffff">
					<input type="text" name="num" id="num" class="bg" />
				</td>
			</tr>
			<tr>
				<td align="center" bgColor="#f5fafe" class="ta_01">
					商品图片：
				</td>
				<td class="ta_01" bgColor="#ffffff" colspan="3">
					<input type="file" name="upFile"  class="bg" />
				</td>
			</tr>
			<tr>
				<td align="center" bgColor="#f5fafe" class="ta_01">
					商品描述：
				</td>
				<td class="ta_01" bgColor="#ffffff" colspan="3">
					<textarea name="description" id="description" rows="5" style="width:99%;"></textarea>
				</td>
			</tr>
			<tr>
				<td class="ta_01" style="padding: 10px 0;" align="center" bgColor="#f5fafe" colSpan="4">
					<input id="addBtn" type="button" value="确定" />&nbsp;&nbsp;
					<input  id="reset" type="reset" value="重置" />&nbsp;&nbsp;
					<input id="closeDialog" type="button" value="关闭" />
				</td>
			</tr>
		</table>
	</form>
</div>
<div style="padding: 3px;">
	<div class="option">
		<input id="add" type="button" value="添加" />
		<input id="del" type="button" value="删除选中(支持跨页！)" />
	</div>
	<table id="dataTable" cellspacing="0" cellpadding="0" bordercolor="gray" border="1" width="100%">
		<tr style="font-weight: bold; font-size: 12pt; height: 25px; background-color: #afd1f3">
			<thead>
			<td width="40px" align="center">
				<input type="checkbox" id="selectAll" />
			</td>
			<td width="80px" align="center">序号</td>
			<td width="" align="center">商品名称</td>
			<td width="100px" align="center">商品价格</td>
			<td width="100px" align="center">剩余数量</td>
			<td width="500px" align="center">商品描述</td>
			<td width="500px" align="center">商品图片</td>
			<td width="120px" align="center">编辑</td>
			<a href="aa">点击</a>
		</tr>
			</thead>
		<tbody id="tbody">


		</tbody>

	</table>
	<%@ include file="page.jsp" %>
</div>
</body>
</html>